<template>
  <div class="staticList-box">
    <h1 class="title">财务管理</h1>
    <div class="top-box">
      <div class="topLeft-box">
        <el-card class="box-card-top" shadow="never">
          <div slot="header" class="headerbox">
            <h1>收益统计</h1>
            <el-radio-group v-model="radio1" @change="changeGetDrawData">
              <el-radio-button label="周"></el-radio-button>
              <el-radio-button label="月"></el-radio-button>
              <el-radio-button label="年"></el-radio-button>
            </el-radio-group>
          </div>
          <div style="width:100%;height:300px;" ref="getEcharts"></div>
        </el-card>
      </div>
      <div class="topright-box">
        <el-card class="box-card-top" shadow="never">
          <div slot="header" class="headerbox">
            <h1>收益明细</h1>
            <el-link
              :underline="false"
              @click="gotogetDetail(1)"
              class="linkstyle"
              >查看明细</el-link
            >
          </div>
          <div class="topdetail-box">
            <div class="top-detail">
              <div class="child-box">
                <div class="hongsezi">￥{{ getMoney.shopTotalGiveMoney }}</div>
                <div class="ziti">收益总金额</div>
              </div>
              <div class="child-box">
                <div class="hongsezi">￥{{ getMoney.shopNotGiveMoney }}</div>
                <div class="ziti">待入账金额</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="bottom-box">
      <div class="bottomleft-box">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="headerbox">
            <h1>统计支出</h1>
            <el-radio-group v-model="getradio1" @change="changeSendData">
              <el-radio-button label="周"></el-radio-button>
              <el-radio-button label="月"></el-radio-button>
              <el-radio-button label="年"></el-radio-button>
              <el-radio-button label="全部"></el-radio-button>
            </el-radio-group>
          </div>
          <div style="width:100%;height:250px;" ref="sendEchart"></div>
        </el-card>
      </div>
      <div class="bottomright-box">
        <el-card class="box-card">
          <div slot="header" class="headerbox">
            <h1>支出明细</h1>
          </div>
          <div class="bottomright-body">
            <div class="body-left">
              <div class="hongsezi">
                ￥{{ sendMoney.outAllMoney / 100 || 0 }}元
              </div>
              <div class="ziti">支出总额(元)</div>

              <div class="hongsezi">
                ￥{{
                  sendMoney.backOrderNotGiveMoney / 100 +
                    sendMoney.houseNotGiveMoney / 100 +
                    sendMoney.notPayNum / 100 || 0
                }}元
              </div>
              <div class="ziti">待结算总额(元)</div>
            </div>
            <div class="lineborder"></div>
            <div class="body-right">
              <div class="marlt20">待结算明细</div>
              <div class="marlt20 right-child">
                <div>回收站结算:</div>
                <div>{{ sendMoney.notPayNum / 100 || 0 }}元</div>
                <div>
                  <el-link
                    :underline="false"
                    @click="gotogetDetail(2)"
                    class="linkstyle"
                    >去结算</el-link
                  >
                </div>
              </div>
              <div class="marlt20 right-child">
                <div>仓库垫付待结算:</div>
                <div>￥{{ sendMoney.houseNotGiveMoney / 100 || 0 }}元</div>
                <div>
                  <el-link
                    :underline="false"
                    @click="gotogetDetail(3)"
                    class="linkstyle"
                    >去结算</el-link
                  >
                </div>
              </div>
              <div class="marlt20 right-child">
                <div>采购单物流待结算:</div>
                <div>￥{{ sendMoney.houseNotGiveMoney / 100 || 0 }}元</div>
                <div>
                  <el-link
                    :underline="false"
                    @click="gotogetDetail(4)"
                    class="linkstyle"
                    >去结算</el-link
                  >
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getMonday, getMonth, getYear } from "../../utils/dateFormat";
import echarts from "echarts";
export default {
  name: "staticList-box",
  data() {
    return {
      radio1: "周",
      getradio1: "月",
      week: ["周一", "周二", "周三", "周四", "周五", "周六", "周天"],
      mouth: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30"
      ],
      year: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月"
      ],
      getChart: {},
      getMoney: {},
      sendChart: {},
      sendMoney: {}
    };
  },
  mounted() {
    this.init();
  },
  created() {
    // console.log(this.$route.query.id)
  },
  methods: {
    gotogetDetail(index) {
      if (index == 1) {
        this.$router.push("/purchaseOrder/waitOrder");
      } else if (index == 2) {
        this.$router.push("/finance/blackTotalExpenditure");
      } else if (index == 3) {
        this.$router.push("/finance/WarehouseLogistics");
      } else if (index == 4) {
        this.$router.push("/finance/purchaseLogistics");
      }
    },
    changeSendData(label) {
      if (label == "周") {
        let currStartweek = getMonday("s", 0);
        let currEndweek = getMonday("e", 0);
        this.houseData(3, currStartweek, currEndweek);
        this.drwaSendData(this.getChart);
      } else if (label == "月") {
        let currStartmouth = getMonth("s", 0);
        let currEndmouth = getMonth("e", 0);
        this.houseData(3, currStartmouth, currEndmouth);
        this.drwaSendData(this.getChart);
      } else if (label == "年") {
        let currStartYear = getYear("s", 0);
        let currEndYear = getYear("e", 0);
        this.houseData(3, currStartYear, currEndYear);
        this.drwaSendData(this.getChart);
      } else if (label == "全部") {
        this.houseData(3);
        this.drwaSendData(this.getChart);
      }
    },
    changeGetDrawData(label) {
      console.log(label);
      if (label == "周") {
        let currStartweek = getMonday("s", 0);
        let currEndweek = getMonday("e", 0);
        console.log(currStartweek, currEndweek);
        this.houseData(1, currStartweek, currEndweek);
        this.drawLine(this.getChart, this.week);
      } else if (label == "月") {
        let currStartmouth = getMonth("s", 0);
        let currEndmouth = getMonth("e", 0);
        this.houseData(1, currStartmouth, currEndmouth);
        this.drawLine(this.getChart, this.mouth);
      } else if (label == "年") {
        let currStartYear = getYear("s", 0);
        let currEndYear = getYear("e", 0);
        this.houseData(1, currStartYear, currEndYear);
        this.drawLine(this.getChart, this.year);
      }
    },
    drawLine(getData, showData) {
      let getEcharts = echarts.init(this.$refs.getEcharts);
      let option = {
        xAxis: {
          type: "category",
          data: showData
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: getData,
            type: "line"
          }
        ]
      };
      option && getEcharts.setOption(option);
    },
    drwaSendData(sendData) {
      let sendEchart = echarts.init(this.$refs.sendEchart);
      let option = {
        title: {
          text: "",
          subtext: "",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "right"
        },

        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: sendData,
            left: "0.3",
            right: "33.3333%",
            top: "-70",
            bottom: "50",
            width: "600",
            height: "400",

            // [
            //   { value: 1048, name: '搜索引擎' },
            //   { value: 735, name: '直接访问' },
            //   { value: 580, name: '邮件营销' },
            //   { value: 484, name: '联盟广告' },
            //   { value: 300, name: '视频广告' }
            // ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
                right: "50"
              }
            }
          }
        ]
      };
      sendEchart.setOption(option);
    },
    init() {
      let currStartweek = getMonday("s", 0);
      let currEndWeek = getMonday("e", 0);
      this.houseData(1, currStartweek, currEndWeek);
      this.houseData(2);
      this.houseData(3, currStartweek, currEndWeek);
      this.houseData(4);
    },
    houseData(type, beg, end) {
      // console.log(mid)
      this.$api.finance
        .getAdminFinanceTotal({
          type: type, //	类型 1收益统计 2收益明细 3支出统计 4支出明细	query	true
          beginTime: beg,
          endTime: end
        })
        .then(res => {
          if (res.code == 200) {
            if (type == 1) {
              this.getChart = res.data.givetotal.list;
              // console.log(this.getChart, "123123123")
              let arr = [];
              let week = [];
              this.getChart.forEach(item => {
                arr.push(item.money);
                week.push(item.days);
              });
              this.$nextTick(() => {
                // console.log(arr, week, "1231231232222222222")
                this.drawLine(arr, week);
              });
            } else if (type == 2) {
              this.getMoney = res.data.givedetail;
            } else if (type == 3) {
              this.sendChart = res.data.outtotal;
              // console.log(this.sendChart, "1-------------------------------");
              // 会员回收 userTotalBackMoney
              //会员拓客 userTotalRewardMoney
              //采购单成本 houseTotalMoney
              //垫付总额 backOrderTotalMoney
              //回收站回收支出allNum
              // 积分商品采购支出 inteMoney
              let arr = [
                {
                  value: this.sendChart.backOrderTotalMoney,
                  name: "垫付总额"
                },
                {
                  value: this.sendChart.houseTotalMoney,
                  name: "采购单成本"
                },
                {
                  value: this.sendChart.inteMoney,
                  name: "积分商品采购支出"
                },
                {
                  value: this.sendChart.userTotalBackMoney,
                  name: "会员回收"
                },
                {
                  value: this.sendChart.userTotalRewardMoney,
                  name: "会员拓客"
                },
                {
                  value: this.sendChart.allNum,
                  name: "回收站回收支出"
                }
              ];
              // console.log(arr, "123________");
              this.$nextTick(() => {
                this.drwaSendData(arr);
              });
            } else if (type == 4) {
              this.sendMoney = res.data;
            }
          }
        });
    }
  }
  //
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
.marlt20 {
  margin-left: 20px;
}
.colorOrange {
  color: orange;
}
.martp20 {
  margin-top: 20px;
}
.right-child {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.body-left {
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.lineborder {
  border-left: 1px black solid;
  height: 100%;
}
.bottomright-body {
  width: 100%;
  height: 250px;
  // border: 1px red solid;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .body-left {
    width: 48%;
    height: 100%;
    // border: 1px red solid;
  }
  .body-right {
    // padding: 20px;
    width: 48%;
    height: 100%;
    // border: 1px red solid;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-direction: column;
  }
}
.child-box {
  // width: 100%;
  // height: 40%;
  // border: 1px red solid;
  display: flex;
  justify-content: center;
  align-self: center;
  flex-direction: column;
  margin-bottom: 30px;
  margin-top: 30px;
}

.topdetail-box {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  flex-direction: column;
  .top-detail {
    width: 100%;
    height: 400px;
  }
}

.staticList-box {
  .title {
    font-size: 20px;
  }

  .top-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .topright-box {
      width: 30%;
      // border: 1px red solid;
      // height: 200px;
    }

    .topLeft-box {
      width: 70%;
      // border: 1px red solid;
      // height: 200px;
    }
  }

  .bottom-box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .bottomleft-box {
      width: 50%;
    }

    .bottomright-box {
      width: 50%;
    }
  }
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}

.box-card-top {
  width: 100%;
  height: 400px;
}

.headerbox {
  display: flex;
  justify-content: space-between;
  height: 100%;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
  color: black;
}

a:link {
  text-decoration: none;
}

.linkstyle {
  color: black;
  text-decoration: underline;
}

.div.div--default:hover {
  color: black;
  text-decoration: none;
}
.hongsezi {
  color: red;
  font-size: 40px;
  font-weight: 700;
}
.ziti {
  font-size: 25px;
  font-weight: 700;
}
</style>
